<!DOCTYPE html>
<html>
<head>
    <link href="/css/layui/css/layui.css" rel="stylesheet">
    <link href="/css/hadmin/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/css/hadmin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/hadmin/css/animate.css" rel="stylesheet">
    <link href="/css/hadmin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/css/hadmin/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/jquery.fancybox.min.css"/>
</head>

<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>道具配置</h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group">
                        <form class="form-inline" method="post" action="/platform/proplist" id="form">
                            <input type="hidden" name="export" id='export' value="/">
                            <input type="text" class="form-control" id="starttime" name="starttime"
                                   value="<?=$res['starttime']?>" autocomplete="off"
                                   placeholder="开始日期">~
                            <input type="text" class="form-control" id="endtime" name="endtime"
                                   value="<?=$res['endtime']?>" autocomplete="off"
                                   placeholder="结束日期">
                            <input type="text" placeholder="请输入关键词" name="prop_name" value="<?=$res['prop_name']?>"
                                   class="form-control">
                            <button type="button" class="btn btn-primary" id="search"> 搜索道具</button>
                            <a class="btn btn-primary radius" data-toggle="modal" data-target="#myModal">添加道具</a>
                            <a class="btn btn-primary radius" id="excle">数据导出</a>
                            <a class="btn btn-danger radius" onclick="deleteAll()">批量删除</a>
                        </form>
                    </div>
                </div>
                <div class="page-container">
                    <div class="mt-20">
                        <table class="table table-hover table-striped">
                            <thead>
                            <tr>
                                <th width="25"><input type="checkbox" name="" value=""></th>
                                <th width="80">ID</th>
                                <th width="100">道具名称</th>
                                <th width="100">道具介绍</th>
                                <th width="40">道具状态</th>
                                <th width="90">道具展示图片</th>
                                <th width="130">新增时间</th>
                                <th width="130">最后修改时间</th>
                                <th width="160">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach($prop as $value): ?>
                            <tr>
                                <td>
                                    <input type="checkbox" value="{{ $item->id }}" name="id[]">
                                </td>
                                <td><?= $value['id']?></td>
                                <td><?= $value['prop_name']?></td>
                                <td><?= $value['desc']?></td>
                                <td>
                                    <?php if($value['status']):?>
                                    使用中
                                    <?php else:?>
                                    禁用
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <a href="<?=STATIC_URL.$value['image'] ?>" data-fancybox data-caption="<?= $value['prop_name']?>">
                                    <img height="39px" src="<?=STATIC_URL.$value['image'] ?>"/>
                                    </a>
                                </td>
                                <td><?= date('Y-m-d H:i:s',$value['init_time'])?></td>
                                <td><?= $value['last_time']?></td>
                                <td class="td-manage">
                                    <a onclick="edit(<?= $value['id'] ?>,'<?= $value['prop_name']?>','<?= $value['desc']?>','<?= $value['image']?>')"
                                       data-toggle="modal" data-target="#myModal">修改</a>
                                    <a data-id="<?= $value['id'] ?>" class="delbtn">删除</a>
                                </td>
                            </tr>
                            <?php endforeach;?>
                            </tbody>
                        </table>
                    </div>
                </div>
                <?php if($pageCount > 1): ?>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li
                        <?php if($page == 1 || !$page): ?> class="disabled" <?php endif; ?> >
                        <a <?php if($page == 1 || !$page): ?>  onclick="return false" <?php endif; ?>
                        href="<?= $url.'?page='.($page-1) ?>" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <?php for($i=0;$i<$pageCount;$i++): ?>
                        <li
                        <?php if($page == $i+1): ?> class="active" <?php endif; ?>><a
                            href="<?= $url.'?page='.($i+1) ?>"><?=$i+1?></a></li>
                        <?php endfor; ?>
                        <li
                        <?php if($page == $pageCount): ?> class="disabled" <?php endif; ?> >
                        <a <?php if($page == $pageCount): ?> onclick="return false" <?php endif; ?>
                        href="<?= $url.'?page='.($page+1) ?>" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="close1()" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加道具</h4>
            </div>
            <div class="modal-body">
                <form id="statusForm">
                    <div class="form-group">
                        <input type="hidden" name="id" id="id"/>
                        <label for="prop_name" class="control-label">道具名称</label>
                        <input type="text" name="prop_name" id="prop_name" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="desc" class="control-label">道具描述</label>
                        <input type="text" id="desc" name="desc" class="form-control"/>
                    </div>

                    <div class="form-group">
                        <label class="control-label">道具图片：</label>
                        <input type="file" name="image" id="image" value=""><br/>
                        <img id="imgPre" src="" height="50px"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="close1()" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit">提交</button>
            </div>
        </div>
    </div>
</div>


</html>

<script src="/css/layui/layui.js"></script>
<script src="/css/hadmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/css/hadmin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/css/hadmin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/css/hadmin/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/css/hadmin/js/plugins/layer/layer.min.js"></script>
<script src="/css/hadmin/js//hAdmin.js?v=4.1.0"></script>
<script src="/css/hadmin/js/index.js"></script>
<script src="/js/moment-with-locales.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script src="/css/hadmin/js/plugins/toastr/toastr.min.js"></script>
<script src="/js/jquery.fancybox.min.js"></script>
<script src="/js/cupload.js"></script>

<script>
    $('#starttime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss',});
    $('#endtime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss'});
    // 给删除按钮绑定事件
    $('.delbtn').click(function (evt) {
        // 发起一个delete请求
        var id = $(this).data('id');
        $(this).prop('disabled', 'disabled');
        $.ajax({
            url: "/platform/delProp",
            type: 'post',
            dataType: 'json',
            data: {'id': id},
        }).then((res) => {
            if (res.code == 200) {
                layer.msg(res.msg, {time: 2000, icon: 1}, () => {
                    window.location.reload();
                });
            } else {
                layer.msg(res.msg, {time: 2000, icon: 2});
            }
        });
        // jquery取消默认事件
        return false;
    });

    function deleteAll() {
        let ids = $("input[name='id[]']:checked");
        let id = [];
        let url = "{{route('admin.user.delAll')}}";
        $.each(ids, function (key, value) {
            id.push($(value).val());
        });

        layer.confirm('是否批量删除这些数据？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            if (id.length > 0) {
                $.ajax({
                    url,
                    data: {id, _token},
                    type: 'DELETE'
                }).then(({status, msg}) => {
                    layer.msg(msg, {time: 2000, icon: 1}, () => {
                        // 删除当前行
                        window.location.reload();
                    });
                });
            }
        });
    }

    function preImg(sourceId, targetId) {
        if (navigator.userAgent.indexOf("MSIE") >= 1) {
            url = document.getElementById(sourceId).value;
        } else if (navigator.userAgent.indexOf("Firefox") > 0) {
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) {
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        document.getElementById(targetId).src = url;
    }

    $("#image").on('change', function () {
        preImg('image', 'imgPre');
    })

    //点击修改按钮
    function edit(id, prop_name, desc, image) {
        $("#id").val(id);
        $("#prop_name").val(prop_name);
        $("#desc").val(desc);
        let imageUrl = "<?=STATIC_URL?>" + image;
        $("#imgPre").attr("src", imageUrl);
    }

    function close1() {
        window.location.reload();
    }

    //提交修改
    $("#submit").click(function () {
        var fd = new FormData();
        //获取到上传的图片文件
        var file_data = $('#image').prop('files')[0];
        //像FormData中添加数据
        fd.append('image', file_data);
        fd.append('id', $('#id').val());
        fd.append('prop_name', $('#prop_name').val());
        fd.append('desc', $('#desc').val());
        $.ajax({
            url: '/platform/dellProp',
            data: fd,
            contentType: false,//jQuery不要去设置Content-Type请求头
            processData: false,//jQuery不要去处理发送的数据
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg, {time: 2000, icon: 1}, () => {
                        window.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 2000, icon: 2}, () => {
                        window.location.reload();
                    });
                }
            }
        })
    })

    //导出excle
    $("#excle").click(function () {
        $("#export").val('wyq');
        $("#form").submit();
    })

    //筛选
    $("#search").click(function () {
        $("#export").val('');
        $("#form").submit();
    })
</script>